const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack 配置信息
module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          // 配置babel
          // {
          //   loader:"babel-loader",
          //   options:{
          //     // 预定义环境
          //     presets:[
          //       [
          //         "@babel/preset.env",
          //         {
          //           // 兼容的目标浏览器
          //           target:{
          //             "chrome":"58",
          //              "ie":"11"
          //           },
          //           // 指定core.js 的版本
          //           "corejs":"3",
          //           // 按需加载
          //           "useBuiltIns":"usage"

          //         }
          //       ]
          //     ]
          //   }
          // },
          "ts-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
  // 用来设置引入模块扩展名，告诉index.ts可以引入m1.ts 文件
  resolve: {
    // 配置解析模块路径别名，优点：简写路径，缺点：路径没有提示
    // 'src/css/index.css' -> '$css/index.css'
    alias: {
      $css: path.resolve(__dirname, "src/css"),
    },
    // 配置省略文件路径的后缀名 'xxx.js'->'xxx'
    // 使用这个配置时切记不可以起名字相同的文件，比如index.js和index.css,那么在引入index.css的时候可能会引成index.js
    extensions: [".js", ".ts"],
  },
  mode: "development",
};
